<!DOCTYPE html>
    <style>
        .box{
            width: 888px;
            height: 300px;
            margin: 200px auto;
            position: relative;
        }
   
        p{
            position: absolute;
            top: 0;
            left: 0;
            font-size: 38px;
            font-weight: 600;
						/* text-align: justify; */
        }
        #text{
            color: #666;
						display: none;
        }
        #copyText{
            color: rgb(253, 145, 145);
        }


        span {
            display: inline-block;
            white-space: nowrap;
            background: linear-gradient(to right, #ABDCFF, #0396FF);
            -webkit-background-clip: text;
            color: transparent;
            animation: landIn 0.3s linear;
						/* outline: 1px solid #f00; */
        }

        @keyframes landIn {
            0% {
                width: 0;
            }
            100% {
                width: 1em;
            }
        }
				
				.spanLong{
					display: inline-block;
					white-space: nowrap;
					background: linear-gradient(to right, #ABDCFF, #0396FF);
					-webkit-background-clip: text;
					color: transparent;
					animation: landInLong 2.8s linear;
				}
				
				@keyframes landInLong {
				    0% {
				        width: 0;
				    }
				    100% {
				        width: 5em;
				    }
				}
    </style>
		<div>实现多行文字被颜色逐渐填满的特效</div>
		<!-- 文字切割
		 1提取底部文字盒子的文字，遍历它，用span标签包裹，然后每隔0.3秒向上层盒子添加它
		 2把渐渐填满文字的动画加给span标签即可，这样当前文字动画结束之后，下个文字被添加进来，动画又开始
		 -->
    <div class="box">
        <p id="text">你好呀，我是南极大冰块~目前是一名在线掘金高级摸鱼师，精通摸鱼、划水、坐着睡觉、拍马屁、吹牛、甩锅、吵架等前端开发必备技能~关注我，一起学习好玩的前端知识吧！</p>
        <p id="copyText"></p>
       
    </div>
		
		 <p id="copyText"><span class="spanLong">我是南极大冰块</span></p>

    <script>
        let text = document.querySelector("#text")
        let copyText = document.querySelector("#copyText")
        // textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。
        let letters = text.textContent.split("")
        console.log(letters)
        for (let i = 0; i < letters.length; i++) {
            let span = document.createElement("span")
            span.textContent = letters[i]
            setTimeout(() => {
                copyText.append(span)
            }, 300*i)
        }
    </script>
